import React from 'react'
import {Breadcrumb} from "antd"
import { Outlet } from "react-router-dom"
import { useLocation,Link } from "react-router-dom"
const breadcrumbNameMap = {
  '/home': '首页',
  '/home/movie': '电影',
  '/home/': 'Application2',
  '/apps/1/detail': 'Detail',
  '/apps/2/detail': 'Detail',
};

function Home() {
  const location = useLocation();

  const pathSnippets = location.pathname.split('/').filter((i) => i);
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    console.log(url);
    return (
      <Breadcrumb.Item key={url}>
        <Link to={url}>{breadcrumbNameMap[url]}</Link>
      </Breadcrumb.Item>
    );
  });
  const breadcrumbItems = [
    <Breadcrumb.Item key="home">
      <Link to="/">Home</Link>
    </Breadcrumb.Item>,
  ].concat(extraBreadcrumbItems);
  return (
    <div style={{width:"100%",height:"100%"}}>
        {/* <Breadcrumb>{extraBreadcrumbItems}</Breadcrumb> */}
      <Outlet></Outlet>
    </div>
  )
}

export default Home